<template>
	<view class="main-box">
		<view class="stage fullscreen"></view>
		<view class="curtain fullscreen" :class="!showWinnerScreen ? 'show':''"></view>
		<view v-if="!showWinnerScreen" class="add-names">
			<text class="deep-shadow">抽奖选择器</text>
			<textarea v-model="namesText" placeholder="在单独行中输入名称"/>
			<button :disabled="!namesText" @click="pickNames" type="warn">选择一个获奖者</button>
		</view>
		<view v-else class="winner-screen">
			<text v-if="pickedWinner" class="deep-shadow">获奖者!!</text>
			<div class="name-card" :class="zoomingNames ? 'zoom' : ''">
				<div v-if="currentName" class="card-box" :class="!pickedWinner ?'bg-picked':'bg-winner'">
					{{currentName}}
				</div>
			</div>
			<button v-if="pickedWinner" @click="startAgain" size="mini" type="warn">重新抽奖</button>
		</view>
	</view>
</template>

<script>
	let animateNamesInterval
	export default {
		data() {
			return {
				showWinnerScreen: false,
				namesText: '',
				namesArray: [],
				currentName: '',
				pickedWinner: false,
				zoomingNames: false,
				audioConf:{
					src:'https://down.ear0.com:3321/preview?soundid=36523&type=mp3',
					audioAction: {
						method: 'pause'
					}
				}
			}
		},
		methods: {
			pickNames(){
				this.showWinnerScreen = true
				this.initNamesArray()
				this.audioPlay((result)=>{
					if(result === 'success'){
						this.animateNames()
						this.stopAnimateNames()
						this.zoomNames()
					}
				})
			},
			initNamesArray() {
			  this.namesArray = this.namesText.split('\n')
			  this.namesArray = this.shuffle(this.namesArray)
			},
			animateNames() {
			  let counter = 0
			  setTimeout(() => {
				animateNamesInterval = setInterval(() => {
				  this.currentName = ''
				  if (counter === this.namesArray.length - 1) {
					counter = 0
				  } else {
					counter++
				  }
				  setTimeout(() => {
					this.currentName = this.namesArray[counter]
				  }, 100)
				}, 200)
			  }, 700)
			},
			stopAnimateNames() {
			  setTimeout(() => {
				clearInterval(animateNamesInterval)
				this.pickedWinner = true
			  }, 8400)
			},
			zoomNames() {
			  setTimeout(() => {
				this.zoomingNames = true
			  }, 1000)
			},
			startAgain() {
			  if (this.namesText.indexOf(this.currentName + '\n') !== -1) {
				this.namesText = this.namesText.replace(this.currentName + '\n', '')
			  } else {
				this.namesText = this.namesText.replace(this.currentName, '')
			  }
			  this.showWinnerScreen = false
			  this.pickedWinner = false
			  this.currentName = ''
			  this.zoomingNames = false
			},
			shuffle(a) {
			  let j, x, i
			  for (i = a.length - 1; i > 0; i--) {
				j = Math.floor(Math.random() * (i + 1))
				x = a[i]
				a[i] = a[j]
				a[j] = x
			  }
			  return a
			},
			audioPlay(callback){
				const {src} = this.audioConf;
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = src;
				innerAudioContext.onPlay(() => {
				  callback('success')
				});
				innerAudioContext.onError((res) => {
				  callback('error')
				});
			}
		}
	}
</script>

<style lang="scss">
	@mixin display-type {
		display: flex;
		flex-wrap: wrap;
	}
	@mixin text-title {
		text-align: center;
		font-size: 40px;
		font-weight:bold;
		color: #fff;
	}
	.main-box{
		background-color: #000;
		@include display-type
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		position: relative;
		.stage{
			background-image: url('http://jy-office.gitee.io/lottery/img/stage.82e13e53.jpg');
			background-size: cover;
			background-position: center;
			opacity: 0.3;
			z-index: 1;
		}
		.curtain{
			background-image: url('http://jy-office.gitee.io/lottery/img/curtain.dfecfb62.png');
			background-size: cover;
			background-position: center;
			transform: translateY(-100%);
			transition: transform 0.3s;
			z-index: 2;
			&.show{
				transform: translateY(0%);
			}
		}
		.add-names{
			@include display-type
			background-color: #f44336;
			padding: 16px 16px;
			flex-direction:column;
			border-radius:4px;
			vertical-align:top;
			z-index:3;
			text{
				@include text-title
			}
			textarea{
				background-color: #FFFFFF;
				margin: 10px 0px;
				padding: 5px;
				border-radius: 4px;
				width: 600rpx;
			}
		}
		.winner-screen{
			z-index: 4;
			text{
				@include text-title
				position:absolute;
				top: 0;
				left: 0;
				right: 0;
			}
			.name-card{
				transform: scale(0.5);
				transition: transform 7.4s linear;
				&.zoom{
					transform: scale(2);
				}
				.card-box{
					color: #FFFFFF;
					font-size: 36rpx;
					border-radius: 4px;
					padding: 10px;
					box-shadow: 0 0 10px 5px #fff, 0 0 15px 10px #f0f, 0 0 20px 15px #0ff;
				}
			}
			button{
				position: absolute;
				bottom: 20px;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
	.fullscreen{
		position: fixed;
		top:0rpx;
		right: 0rpx;
		bottom: 0rpx;
		left: 0rpx;
	}
	.deep-shadow {
	    text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9);
	}
	.bg-picked{
		background-color: #c10015;
	}
	.bg-winner{
		background-color: $uni-color-success;
	}
</style>
